import { useModel } from "@umijs/max"
import { App, Button, Card, Modal, Row } from "antd"
import React, { useEffect, useState } from "react"
import { Image, Layer, Stage } from "react-konva"

// 图像组件
const TotalBoardImage: React.FC<{ imageData: string | null }> = ({ imageData }) => {
  const [image, setImage] = useState<HTMLImageElement | null>(null)

  useEffect(() => {
    if (imageData) {
      const img = new window.Image()
      img.src = `data:image/jpeg;base64,${imageData}`
      img.onload = () => {
        setImage(img)
      }
    } else {
      setImage(null)
    }
  }, [imageData])

  return (
    <Image
      image={image}
      width={image ? image.width : 600}
      height={image ? image.height : 600}
    />
  )
}

const TotalboardErrorModal: React.FC = ({}) => {
  const { callPy } = useModel("websocketModel")
  const {
    totalBoardImageData,
    totalBoardErrorInfo,
    totalboardErrorModalVisible,
    updateProduceData
  } = useModel("produceModel")
  const closeModal = () => {
    updateProduceData({
      totalboardErrorModalVisible: false,
      totalBoardImageData: null,
      totalBoardErrorInfo: ""
    })
  }
  const { message } = App.useApp()
  const { updateWorkStopState } = useModel("deviceModel")
  // 处理函数
  const handleBoardBack = async () => {
    const response = await callPy("produce", "board_back_from_web", [])
    if (response.state) {
      message.success("板回退指令下发成功")
    } else {
      message.error("板回退指令下发失败:" + response.info, 5)
    }
  }

  const handleReGetImage = async () => {
    const response = await callPy("produce", "re_get_image_from_web", [])
    if (response.state) {
      closeModal()
    } else {
      message.error(response.info, 5)
    }
  }

  const handleStopProduce = async () => {
    const response = await callPy("produce", "stop_produce_from_web", [])
    if (response.state) {
      updateWorkStopState(true)
      message.success("停止自动作业指令下发成功")
      closeModal()
    } else {
      message.error("停止自动作业指令下发失败:" + response.info, 5)
    }
  }

  const handleTotalBoardIsOk = async () => {
    const response = await callPy("produce", "total_board_is_ok_from_web", [])
    if (response.state) {
      message.success("人工确认物料OK成功")
      closeModal()
    } else {
      message.error(response.info, 5)
    }
  }

  const handleOpenTotalBoardErrorDir = async () => {
    const response = await callPy("produce", "open_totalboard_error_dir_from_web", [])
    if (response.state) {
      message.success("打开图片目录成功")
    } else {
      message.error(response.info, 5)
    }
  }

  return (
    <Modal
      title={<span style={{ color: "orange", fontSize: 16 }}>物料检测未通过提示框</span>}
      open={totalboardErrorModalVisible}
      onCancel={closeModal}
      width="90vw"
      style={{ top: 5 }}
      footer={null}
    >
      <Card>
        <Card.Grid style={{ width: "60%", textAlign: "left" }}>
          <Stage width={600} height={600}>
            <Layer>
              <TotalBoardImage imageData={totalBoardImageData} />
            </Layer>
          </Stage>
        </Card.Grid>
        <Card.Grid style={{ width: "40%", textAlign: "left" }}>
          <Row>
            <div>
              <p>
                <span style={{ color: "orange", fontSize: 16 }}>提示消息: </span>
              </p>
              <span
                style={{
                  color: "#FF4D4F", // 使用 Ant Design 的警告色
                  fontSize: 16, // 增大字体
                  fontWeight: 500, // 加粗
                  lineHeight: "24px" // 增加行高提高可读性
                }}
              >
                {totalBoardErrorInfo}
              </span>
            </div>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <Button type="primary" onClick={handleBoardBack}>
              板回退
            </Button>
            <Button type="primary" onClick={handleReGetImage} style={{ marginLeft: 20 }}>
              重新拍照
            </Button>
            <Button type="primary" onClick={handleStopProduce} style={{ marginLeft: 20 }}>
              停止
            </Button>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <Button type="primary" onClick={handleTotalBoardIsOk}>
              人工确认物料OK
            </Button>
            <Button
              type="primary"
              onClick={handleOpenTotalBoardErrorDir}
              style={{ marginLeft: 20 }}
            >
              查看图片目录
            </Button>
          </Row>
        </Card.Grid>
      </Card>
    </Modal>
  )
}

export default () => {
  return (
    <App>
      <TotalboardErrorModal />
    </App>
  )
}
